<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>评论管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的评论</el-breadcrumb-item>
        </el-breadcrumb>
        <!--列表-->
        <el-table :data="listData" border style="width: 100%;margin-top:20px;">
            <el-table-column prop="UserCode" label="用户" />
            <el-table-column prop="BookCode" label="书籍" />
            <el-table-column prop="CreateTime" label="借书日期" />
            <el-table-column prop="BackTime" label="还书时间" />
            <el-table-column align="center" fixed="right" label="操作" prop="rateValue">
                <template #default="scope">
                    <el-button type="text" @click="viewComments(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm"></Pagination>
        <!-- 查看评论 -->
        <el-dialog title="评论" :visible.sync="commentsVisible" width="30%">
            <div v-for="(item, index) in commitData" :key="index" class="commit">
                <div class="imgTop">
                    <img :src="item.img" alt="" class="img">
                    <span class="title">{{ item.title }}</span>
                </div>
                <div class="cont">
                    <p>{{ item.content }}</p>
                    <p class="time">{{ item.createDate }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
    // 注册组件
    components: {
        Pagination
    },
    data() {
        return {
            // listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            commentsVisible: false,
            listData: [
                {
                    UserCode: '用户1',
                    BookCode: '书1',
                    CreateTime: '2024/4/26',
                    BackTime: '2024/4/28',
                },
                {
                    UserCode: '用户1',
                    BookCode: '书2',
                    CreateTime: '2024/4/26',
                    BackTime: '2024/4/28',
                },
            ],
            commitData: [
                {
                    id: 1,
                    title: "我的名字太长了怎么办啊啊啊啊啊啊",
                    img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                    content: "萨拉啊小伙计1！",
                    createDate: '2024-04-26',
                    commentUser: ""
                },
                {
                    id: 2,
                    title: "用户2",
                    img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                    content: "萨拉啊小伙计2！",
                    createDate: '2024-04-26',
                    commentUser: ""
                }
            ]
        }
    },
    created() {
        this.getdata()
    },
    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取公司列表
        getdata() {
            // this.listData = res.data
            // this.pageparm.currentPage = this.formInline.page
            // this.pageparm.pageSize = this.formInline.limit
            // this.pageparm.total = res.count
        },
        // 查看评论
        viewComments(row) {
            this.commentsVisible = true
            console.log(row, 'row')
        }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}

.add {
    margin: 10PX 0;
}

.commit {
    background: #fafafa;
    padding: 5px;
    margin: 10px 0;
}

.imgTop {
    display: flex;
    line-height: 40px;
}

.title {
    margin: 0 10px;
}

.cont {
    width: 100%;
    margin-left: 50px;
}

.time {
    color: #a2a2a2;
    font-size: 12px;
}

.img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
}
</style>